<template>
  <div>
    <!--header-->
    <headers></headers>
    <!--header end-->

    <!-- banner -->
    <div class="top-banner service-banner">
      <div class="banner-inner">
        <h1>全生命周期服务体系</h1>
        <p>
          小步创想提供专业的咨询实施、实地培训、安全运维等服务<br />帮助客户实现全生命周期的管理，解决城市管理的挑战
        </p>
      </div>
    </div>
    <!-- banner end -->

    <!-- service -->
    <div class="service_main">
      <!-- 咨询规划服务 -->
      <div class="service_consult" id="0">
        <div class="service_wrapper">
          <div class="service_consult_box">
            <img src="images/service/7_1.png" alt="" />
          </div>
          <div class="service_consult_box service_consult_content">
            <h1>咨询规划服务</h1>
            <p>
              小步创想提供不限于智慧城市管理、大数据的社会综合治理咨询定制服务，以客户成功为导向，深层分析使用场景，实地调研客户需求，帮助客户构筑贴合业务需求，集聚智慧化、创新化、定制化的城市管理方案。
            </p>
          </div>
        </div>
      </div>

      <!-- 定制设计服务 -->
      <div class="service_design" id="1">
        <div class="service_wrapper">
          <div class="panel-title">
            <span class="title-line"></span>
            <h1>定制设计服务</h1>
            <span class="title-line"></span>
          </div>
          <p>
            小步创想拥有多年的行业服务经验和项目管理经验，每一次设计都由专家团队亲自把关执行，经过多次审议调整之后，才会确定更符合客户需求的解决方案。
          </p>
          <div>
            <img class="service_img" src="images/service/7_2.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 培训实施服务 -->
      <div class="service_train" id="2">
        <div class="service_wrapper">
          <div class="panel-title">
            <span class="title-line"></span>
            <h1>培训实施服务</h1>
            <span class="title-line"></span>
          </div>
          <p>
            客户签约之后，小步会立刻安排功能培训事宜，由专业的实施工程师督办执行，严格按照实施控制流程并提供定期回访维护工作，确保解决客户所有疑虑。
          </p>
          <div class="service_train_boxes">
            <div class="service_train_box">
              <div>
                <img
                  class="service_img"
                  src="images/service/7_3_1.png"
                  alt=""
                />
              </div>
              <p class="service_train_title">系统功能培训</p>
              <p>
                提供完整的用户手册和系统的功能培训，助力客户更快掌握系统使用
              </p>
            </div>
            <div class="service_train_box">
              <div>
                <img
                  class="service_img"
                  src="images/service/7_3_2.png"
                  alt=""
                />
              </div>
              <p class="service_train_title">系统实施</p>
              <p>专业团队协同和您一起快速配置系统，并保证系统能正常运转</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全运维服务 -->
      <div class="service_maintain" id="3">
        <div class="service_wrapper">
          <div class="panel-title">
            <span class="title-line"></span>
            <h1>安全运维服务</h1>
            <span class="title-line"></span>
          </div>
          <p>
            安全运维就是在系统运行期间，建立防护、检测和恢复的闭环安全机制，保证业务系统持续安全。
          </p>
          <div class="service_maintain_boxes">
            <div class="service_maintain_box">
              <div>
                <img
                  class="service_img"
                  src="images/service/7_4_1.png"
                  alt=""
                />
              </div>
              <p class="service_maintain_title">防护</p>
              <p>应用系统调优、安全加固、安全设备运维</p>
            </div>
            <div class="service_maintain_box">
              <div>
                <img
                  class="service_img"
                  src="images/service/7_4_2.png"
                  alt=""
                />
              </div>
              <p class="service_maintain_title">检测</p>
              <p>脆弱性检查、代码安全审计、渗透测试、信息安全风险评估等</p>
            </div>
            <div class="service_maintain_box">
              <div>
                <img
                  class="service_img"
                  src="images/service/7_4_3.png"
                  alt=""
                />
              </div>
              <p class="service_maintain_title">响应和恢复</p>
              <p>应急响应、安全通告</p>
            </div>
          </div>
          <p>
            小步创想依据符合ISO9001:2000标准的支持体系，提供包括基础服务（远程）、现场服务等安全运维服务。根据具体情况，又可形成多种组合，既专业又灵活。
          </p>
          <div class="service_maintain_table">
            <div class="service_maintain_th">小步创想技术服务响应时间</div>
            <div class="service_maintain_tr">
              <div class="service_maintain_td_1">
                <h1>问题等级</h1>
              </div>
              <div class="service_maintain_td_2">
                <h1>问题描述</h1>
              </div>
              <div class="service_maintain_td_3">
                <h1>响应时间</h1>
              </div>
              <div class="service_maintain_td_4">
                <h1>解决时间</h1>
              </div>
            </div>
            <div class="service_maintain_tr">
              <div class="service_maintain_td_1">1级</div>
              <div class="service_maintain_td_2">
                影响系统功能正常使用的问题，如客户数据无法加载，数据无法提交等
              </div>
              <div class="service_maintain_td_3">10分钟</div>
              <div class="service_maintain_td_4">1小时</div>
            </div>
            <div class="service_maintain_tr">
              <div class="service_maintain_td_1">2级</div>
              <div class="service_maintain_td_2">
                系统原因导致软件功能出现异常，但不影响正常的数据操作和提交
              </div>
              <div class="service_maintain_td_3">20分钟</div>
              <div class="service_maintain_td_4">2小时</div>
            </div>
            <div class="service_maintain_tr">
              <div class="service_maintain_td_1">3级</div>
              <div class="service_maintain_td_2">
                一般使用或操作性问题，如对系统操作不熟悉等常见问题
              </div>
              <div class="service_maintain_td_3">及时响应</div>
              <div class="service_maintain_td_4">
                以下任意一种方式反馈，即时安排（远程）协助问题：<br />拨打7*24小时售后服务热线400-864-9582或028-85458736<br />直接联系对接技术人员QQ
              </div>
            </div>
            <div class="service_maintain_tr service_maintain_tr_last">
              <div class="service_maintain_td_1">4级</div>
              <div class="service_maintain_td_2">
                在系统使用过程中，对系统的建议或需求反馈
              </div>
              <div class="service_maintain_td_3">售后人员即时反馈产品部</div>
              <div class="service_maintain_td_4">
                3天内给予答复（电话、QQ、邮件）
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- service end -->

    <div class="float-box">
      <div class="qq-advice">
        <a
          class="qq-advice-inner"
          href="http://wpa.qq.com/msgrd?v=3&uin=2366320826&site=qq&menu=yes"
          target="_blank"
        >
          <img src="images/public/advice_icon.png" />
          <span>在线咨询</span>
        </a>
        <div class="tel-advice">
          <div class="tel-icon"><img src="images/public/phone.png" /></div>
          <div class="tel-box">
            <img src="images/public/phone2.png" />
            <div class="tel-box-r">
              <p>咨询热线</p>
              <span>400-864-9582</span>
            </div>
          </div>
        </div>
      </div>

      <a class="back-top"></a>
    </div>

    <!--footer-->
    <footers></footers>
    <!--footer end-->
  </div>
</template>

<script>
import $ from "jquery";
import headers from "../component/headers";
import footers from "../component/footers";
export default {
  name: "brand",
  data() {
    return {};
  },
  components: {
    headers,
    footers,
  },
  methods: {
    bdshare() {
      $(function() {
        var share_target_url;
        var share_target_sharetitle;
        var share_target_shareabstract;

        $(".bdsharebuttonbox>a").mouseover(function() {
          var Tthis = $(this);
          var url = window.location.href;
          var oneurl;

          if ($(this).hasClass("popVideo")) {
            var url = "http://zf.xbcx.com.cn/shareVideo.php";
          } else {
            var url = window.location.href;
          }

          oneurl = url;
          if (url.indexOf("#") > 0) {
            oneurl = url.substring(0, url.indexOf("#"));
          }
          if (oneurl.indexOf("?") > 0) {
            share_target_url =
              oneurl +
              "&" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          } else {
            share_target_url =
              oneurl +
              "?" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          }
          share_target_sharetitle = Tthis.data("sharetitle");
          share_target_shareabstract = Tthis.data("shareabstract");
        });

        window._bd_share_config = {
          common: {
            onBeforeClick: function(cmd, config) {
              if (!share_target_url) {
                share_target_url = window.location.href;
              }
              config.bdUrl = share_target_url;
              config.bdText = share_target_sharetitle;
              config.bdDesc = share_target_shareabstract;
              return config;
            },
          },

          share: [
            {
              tag: "share_1",
              bdSize: 24,
            },
            {
              tag: "share_2",
              bdSize: 32,
            },
          ],
        };
      });
    },
    common() {
      //导航下拉菜单
      $(".header-nav-menu")
        .mouseenter(function() {
          var hasChild = $(this).find(".header-subnav").length;
          if (hasChild > 0) {
            $(this)
              .find(".header-subnav")
              .stop()
              .slideDown("fast");
          }
        })
        .mouseleave(function() {
          $(this)
            .find(".header-subnav")
            .stop()
            .slideUp("fast");
        });

      $(window).scroll(function() {
        if ($(window).scrollTop() > 0) {
          $(".header").addClass("scroll");
        } else {
          $(".header").removeClass("scroll");
        }
      });

      var scrollFun = function() {
        var width = ($(".scroll-container").width() - 60) / 4;
        $(".scroll-item").width(width);
        var img_len = $(".scroll-item").length;
        var img_wd = width;

        var num = 0;
        if (img_len < 5) {
          $(".scroll-next,.scroll-prev").hide();
          $(".scroll-container ul").css({
            width: "100%",
            "text-align": "center",
          });
        }
        if ($(".scroll-container ul li").length > 4) {
          $(".scroll-container ul").append($(".scroll-container ul").html());
        }

        $(".scroll-next").click(function() {
          if (num == img_len) {
            num = 0;
            $(".scroll-container ul").css("left", 0);
          }
          num++;
          move(-num);
        });

        $(".scroll-prev").click(function() {
          if (num == 0) {
            num = img_len;
            $(".scroll-container ul").css("left", -num * (img_wd + 13) + "px");
          }
          num--;
          move(-num);
        });

        function move(num) {
          $(".scroll-container ul")
            .stop()
            .animate({
              left: num * (img_wd + 13) + "px",
            });
        }
      };
      // scrollFun();
      autoRound(".honor-cell", ".honor-img-big div");
      autoRound(".about_team_peo", ".about_team_text");
      function autoRound(item, detail) {
        var $item = $(item);
        var $detail = $(detail);

        var i = 0;
        var length = $item.length;
        var t = setInterval(function() {
          i++;
          if (i == length) {
            i = 0;
          }
          $item
            .eq(i)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        }, 4000);

        $item.mouseenter(function() {
          clearInterval(t);
          var i = $(this).index();
          $(this)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        });

        $item.mouseleave(function() {
          var i = $(this).index();
          t = setInterval(function() {
            i++;
            if (i == length) {
              i = 0;
            }
            $item
              .eq(i)
              .addClass("cur")
              .siblings()
              .removeClass("cur");
            $detail
              .eq(i)
              .addClass("show")
              .siblings()
              .removeClass("show");
          }, 4000);
        });
      }

      indexBanner();
      function indexBanner() {
        var n = 0;
        var t = n;
        var width = $(".banner-inner-tab .tab-item").width();
        var count = $(".banner-inner-item").length;
        $(".banner-inner-tab .tab-line img").width(width);

        $(".banner-inner-tab .tab-item").click(function() {
          var i = $(this).index();
          n = i;
          if (i >= count) {
            return;
          }

          $(".banner-inner-item")
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
          $(".tab-line img").css({
            transform: "translateX(" + width * i + "px)",
          });
        });

        t = setInterval(showAuto, 8000);

        $(".banner-inner-tab").hover(
          function() {
            clearInterval(t);
          },
          function() {
            t = setInterval(showAuto, 8000);
          }
        );

        function showAuto() {
          n = n >= count - 1 ? 0 : ++n;
          $(".banner-inner-tab .tab-item")
            .eq(n)
            .trigger("click");
        }
      }

      $(".back-top").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
        return true;
      });

      $(".product-shouqi").click(function() {
        var w = $(".product-posit").width();
        $(".product-posit").css("margin-left", -w);
        setTimeout(function() {
          $(".product-zhankai").show();
          $(this).hide();
        }, 400);
      });
      $(".product-zhankai").click(function() {
        $(".product-posit").css("margin-left", 0);
        $(".product-shouqi").show();
        $(this).hide();
      });
    },
    video_player() {
      var palyers = {};
      window.TPlayer = {
        play: function(eleID, fileId, auto_play, size) {
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          var option = {
            auto_play: auto_play,
            file_id: fileId,
            app_id: "1252000488",
            width: size.width,
            height: size.height,
          };
          /*调用播放器进行播放*/
          palyers[eleID] = new qcVideo.Player(
            /*代码中的id_video_container将会作为播放器放置的容器使用, 可自行替换*/
            eleID,
            option
          );
          return palyers[eleID];
        },
        pasue: function(eleID) {
          palyers[eleID].pause();
        },
        pasueAll: function() {
          $.each(palyers, function(i, n) {
            n.pause();
          });
        },
        change: function(eleID, fileId, auto_play, size) {
          if (!palyers[eleID]) {
            this.play(eleID, fileId, auto_play, size);
          }
          palyers[eleID].changeVideo({
            app_id: "1252000488",
            file_id: fileId,
            auto_play: auto_play,
          });
        },
        livePlay: function(eleID, url, size) {
          //http://ptest-meeket.xbwq.com.cn/meeket/viewer/live/viewer/index?a=d722031322a3224696f5d6f63622c22283131322a3224696f5566796c622b7
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          if ($("iframe_" + eleID).length) {
            return;
          }
          $("#" + eleID).html(
            '<iframe id="iframe_' +
              eleID +
              '" src="' +
              url +
              "&is_full_play=1&v_height=" +
              size.height +
              '"' +
              'height="' +
              size.height +
              '" width="' +
              size.width +
              '" frameborder="0"></iframe>'
          );
        },
        liveStop: function(eleID) {
          $("#" + eleID).html("");
        },
      };
    },
  },
  mounted() {
    this.bdshare();
    this.common();
    this.video_player();
  },
};
</script>
